import React, { useState, useEffect } from "react";
import { useLocation,useNavigate } from "react-router-dom";
import styles from "./List.module.css";
import { Getg } from "../request/api";
import Logo from "../../public/logo.png";
export default function Add() {
    const location = useLocation()
    let x = location.state
    let [list, setList] = useState([])

    useEffect(() => {
        Getg().then(res => {
            setList(res.data.list)
        })
    }, [])
    // 12
    const nav = useNavigate()
    const goto=()=>{
        nav("/cart",{
            state:x
        })
    }
    return (
        <div style={{ width: "1200px", margin: "20px auto" }}>
            <div className={styles.top}>
                <div className={styles.topLeft}>
                    <div style={{ width: "80px", height: "80px", borderRadius: "50%", backgroundColor: "#97cc20", textAlign: "center", lineHeight: "80px", color: "white" }}>
                        Logo
                    </div>
                    <div style={{ fontSize: "30px", marginLeft: "20px", height: "80px", lineHeight: "80px", color: "#97cc3d" }}>
                        生鲜电商
                    </div>
                </div>
                <div className={styles.topRight}>
                    <div className={styles.seabar}>
                        <div>
                            <input type="text" placeholder="请输入搜索内容" style={{ borderColor: "#97cc3d", width: "400px", height: "40px", }} />
                        </div>
                        <div style={{ height: "45px", width: "100px", backgroundColor: "#97cc3d", color: "white", textAlign: "center", lineHeight: "45px" }}>
                            搜索
                        </div>
                    </div>
                </div>
            </div>
            <div style={{ backgroundColor: "white", width: "1200px", height: "180px", marginTop: "30px", display: "flex", justifyContent: "space-between" }}>
                <div style={{ marginLeft: "40px" }}>
                    <p style={{ color: "#95cc2f", fontSize: "25px" }}>√ 您已成功加入购物车</p>
                    <div style={{ marginTop: "10px", display: "flex" }}>
                        <img src={x.img} style={{ width: "100px", height: "100px" }} />
                        <div style={{ marginLeft: "20px" }}>
                            <p>{x.name} 品种优良 精挑细选</p>
                            <p style={{ marginTop: "50px" }}>{x.cate} | {x.num}kg</p>
                        </div>
                    </div>

                </div>
                <div style={{ marginTop: "120px", display: "flex" }}>
                    <div style={{ marginRight: "40px", lineHeight: "40px" }}>
                        查看商品详情
                    </div>
                    <div style={{ width: "120px", height: "40px", backgroundColor: "#97cc3d", marginRight: "20px", textAlign: "center", lineHeight: "40px", color: "white",cursor:"pointer" }} onClick={goto}>
                        去购物车结算
                    </div>
                </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",marginTop:"25px" }}>
                    <hr style={{ height: '2px', border: 'none', backgroundColor: 'green', width: "500px" }} />
                    <div style={{ fontSize: "25px" }}>
                        商品推荐
                    </div>
                    <hr style={{ height: '2px', border: 'none', backgroundColor: 'green', width: "500px" }} />
                </div>
            <div style={{ marginTop: "40px",backgroundColor:"#f4f8ff" }} >

                <div style={{ marginTop: "20px", display: "flex", flexWrap: "wrap", }}>
                    {
                        list.map((item, index) => <div className={styles.item} style={{  }} key={index}>
                            <div style={{ textAlign: "center" }}>
                                <img src={item.img} style={{ width: "200px" }} />
                            </div>
                            <p style={{ fontSize: "20px" }}>{item.name}</p>
                            <p style={{ color: "#999999" }}>纯天然种植 | 自然生长 | 纯种绿色</p>
                            <p style={{ color: "#fd010b", fontSize: "26px", fontWeight: "bold" }}>
                                ￥ {item.price + ".00"}
                            </p>
                            <div style={{ position: "absolute", bottom: "20px", right: "5px", border: "1px solid #97cc3d", fontSize: "12px", color: "#97d0a7" }}>
                                加入购物车
                            </div>
                        </div>)
                    }
                </div>
                <div style={{marginTop:"20px"}}>
                    <img src={Logo} style={{width:"1200px"}}/>
                </div>
            </div>
        </div>
    )
}